<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询案例修改背景色</title>
    <style>
        /* 1.媒体查询一般按照从大到小或者 从小到大的顺序来 */

        /* 2.小于540px 页面的背景颜色变成蓝色 */
        @media screen and (max-width:539px){
            body{
                background-color: blue;
            }
        }

        /* 3.540 ~ 970 我们的页面颜色改为 绿色 */
        /* @media screen and (min-width:540px) and (max-width:969px){
            body{
                background-color: green;
            }
        } */

        /* 简化代码,省略了and (max-width:969px) */
        @media screen and (min-width:540px){
            body{
                background-color: green;
            }
        }


        /* 4.大于等于970 我们页面的颜色改为 红色 */
        @media screen and (min-width:970px){
            body{
                background-color: red;
            }
        }

        /* 5. screen 还有 and 必须带上不能省略的 */
        /* 6.我们的数字后面必须跟单位 970px 这个px不能省略的 */
    </style>
</head>
<body>
    
</body>
</html>